<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - NBA篮球世界</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/contact.css">
    <link rel="stylesheet" href="../css/animations.css">
</head>

<body>
    <header>
        <div class="logo">
            <img src="../img/NBA-LOGO.png" alt="NBA Logo">
            <h1>联系我们</h1>
        </div>
        <nav>
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="teams.html">球队</a></li>
                <li><a href="players.html">球员</a></li>
                <li><a href="news.html">新闻</a></li>
                <li><a href="contact.html" class="active">联系</a></li>
            </ul>
        </nav>
    </header>

    <main class="contact-page">
        <div class="contact-container">
            <section class="contact-hero">
                <div class="contact-hero-content">
                    <h2>与NBA篮球世界联系</h2>
                    <p>我们随时欢迎您的反馈、建议和询问。无论是球迷、媒体还是合作伙伴，我们都期待听到您的声音。</p>
                </div>
                <div class="contact-hero-image">
                    <img src="../img/contact-banner.webp" alt="NBA联系页面">
                </div>
            </section>

            <section class="contact-methods">
                <div class="contact-method">
                    <div class="method-icon">
                        <i class="icon-phone"></i>
                    </div>
                    <h3>客服热线</h3>
                    <p>1234567689</p>
                    <span>工作日 9:00-18:00</span>
                </div>
                <div class="contact-method">
                    <div class="method-icon">
                        <i class="icon-email"></i>
                    </div>
                    <h3>电子邮箱</h3>
                    <p>123456789@qq.com</p>
                    <span>24小时在线</span>
                </div>
                <div class="contact-method">
                    <div class="method-icon">
                        <i class="icon-location"></i>
                    </div>
                    <h3>办公地址</h3>
                    <p>北美的巨无霸都市圈的市区或邻近市区的已开发郊区</p>
                    <span>欢迎预约参观</span>
                </div>
            </section>

            <section class="contact-form-section">
                <h2>给我们留言</h2>
                <form class="contact-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" id="name" name="name" required placeholder="请输入您的姓名">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" id="email" name="email" required placeholder="请输入您的邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="subject">主题</label>
                        <select id="subject" name="subject">
                            <option value="">选择咨询主题</option>
                            <option value="feedback">意见反馈</option>
                            <option value="cooperation">商务合作</option>
                            <option value="media">媒体咨询</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="message">留言内容</label>
                        <textarea id="message" name="message" rows="5" required placeholder="请详细描述您的问题或建议"></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn submit-btn">提交留言</button>
                        <button type="reset" class="btn reset-btn">重置</button>
                    </div>
                </form>
            </section>

            <section class="social-media">
                <h2>关注我们</h2>
                <div class="social-links">
                    <a href="#" class="social-link">
                        <img src="../img/微博.png" alt="微博">
                        <span>官方微博</span>
                    </a>
                    <a href="#" class="social-link">
                        <img src="../img/微信.png" alt="微信">
                        <span>官方微信</span>
                    </a>
                    <a href="#" class="social-link">
                        <img src="../img/抖音账号.png" alt="抖音">
                        <span>抖音号</span>
                    </a>
                </div>
            </section>
        </div>
    </main>

    <footer>
        <div class="copyright">
            <p>NBA篮球世界</p>
        </div>
    </footer>
</body>

</html>